<template>
  <layout-view :tab-index="999" height-fill>
    <template #content>
      <div style="width: 920px;margin: 10px auto;">
        <h3 style="text-align: center">{{dataInfo.catalog.catalogName}}</h3>
        <div class="ql-editor" v-html="dataInfo.catalog.content"></div>
        <div style="text-align: center">
          <el-button type="text" :disabled="!dataInfo.hasPrev" @click="changeCatalog(dataInfo.prevId)">上一章</el-button>
          <el-button type="text" @click="visible = true">目录</el-button>
          <el-button type="text" :disabled="!dataInfo.hasNext" @click="changeCatalog(dataInfo.nextId)">下一张</el-button>
        </div>
      </div>
      <el-dialog title="目录" :visible.sync="visible" v-if="visible">
        <catalog-page :book-id="dataInfo.catalog.book.bookId" :catalog-id="dataInfo.catalog.id" @catalogClick="changeCatalog"/>
      </el-dialog>
    </template>
  </layout-view>
</template>
<script>
import LayoutView from '@/components/LayoutView.vue'
import CatalogPage from '@/components/CatalogPage.vue'
export default {
  name: 'ReadView',
  components: { LayoutView, CatalogPage },
  data () {
    return {
      dataInfo: {
        catalog: {}
      },
      visible: false
    }
  },
  methods: {
    getCatalog () {
      document.documentElement.scrollTop = 0
      this.$http.get(`api/vip/catalog/${this.dataInfo.catalog.id}`).then(data => {
        if (data) {
          this.dataInfo = { ...data }
          this.$http.post('api/vip/record/save', { catalogId: this.dataInfo.catalog.id, bookId: this.dataInfo.catalog.book.bookId }).then(() => {}).catch(() => {})
        }
      }).catch(() => {})
    },
    changeCatalog (id) {
      this.dataInfo.catalog.id = id
      this.getCatalog()
      this.visible = false
    }
  },
  created () {
    this.dataInfo.catalog.id = this.$route.params.catalogId
    this.getCatalog()
  }

}
</script>

<style scoped>

</style>
